// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/dist/Ionicons';

// antd 按需加载
import { Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { goodsNewList } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RnFlatList, RnImage, Good } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'
class NewProduct extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      // searchBackgroundColor: 'transparent',
      searchBackgroundColor: '#e43130',
    }
    this.goodsNewList = goodsNewList.bind(this)
  }

  componentDidMount() {
    const { user, goodsNewList: { nextPage, pageSize } } = this.props
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    this.goodsNewList({
      pageNum: nextPage,
      pageSize
    });
    // })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { goodsNewList: { pageSize } } = this.props
    this.goodsNewList({
      pageNum: 1,
      pageSize,
      refresh: true
    }).then(res => {
      this.setState({ refreshing: false });
    })
  }

  onEndReached = () => {
    
    const { user, goodsNewList: { nextPage, pageSize, list, total } } = this.props
    if (list.length < total) {
      this.goodsNewList({
        pageNum: nextPage,
        pageSize
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }

  render() {
    const { refreshing, searchBackgroundColor } = this.state
    const { goodsNewList } = this.props
    return (
      <View style={[Style.container]}>
        <Status />
        <NavBar
          title="新品上市"
        />
        <RnFlatList
          style={{
          }}
          columnWrapperStyle={{
            backgroundColor: '#f0f2f5',
            paddingLeft: 3,
            paddingRight: 3,
            paddingTop: 3,
          }}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          numColumns={2}
          removeClippedSubviews={true}
          datas={goodsNewList}
          renderItem={({ item }) => <Good type="good" data={item} />}
        />
      </View >
    );
  }
}


export default connect(({ goodsNewList }) => ({
  goodsNewList,
}))(pureRender(NewProduct))
